/**
 * @description  收益性表现（时点信息）
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import { ThreeHeaderC, TreemapChartC } from '../../../components';
import style from './index.less';

class ShowEchartsFour extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    const { dispatch, args } = this.props;
    dispatch({
      type: 'yieldPerformanceM/getEchartsFour',
      payload: args,
    });
  }

  componentDidUpdate(prevProps) {
    const { dispatch, args } = this.props;
    if (JSON.stringify(args) !== JSON.stringify(prevProps.args)) {
      dispatch({
        type: 'yieldPerformanceM/getEchartsFour',
        payload: args,
      });
    }
  }

  showEcharts = () => {
    const {
      yieldPerformanceM: { echartsFour },
    } = this.props;
    const { series } = echartsFour;
    return (
      <div style={{ height: '423px', overflowY: 'hidden' }}>
        <TreemapChartC
          series={series}
          height='526px'
          type={1} // 矩形树图类型
          leafDepth={2} // 表示『展示几层』
          width='100%'
        />
      </div>
    );
  };

  render() {
    const { loading } = this.props;

    return (
      <div className={style.echarts2}>
        <Spin spinning={loading.effects['yieldPerformanceM/getInfo'] == true}>
          <ThreeHeaderC title='明细资产收益率' />
          <div className='echarts'>{this.showEcharts()}</div>
        </Spin>
      </div>
    );
  }
}
export default connect(({ yieldPerformanceM, loading }) => ({
  yieldPerformanceM,
  loading,
}))(ShowEchartsFour);
